<template>
	<view class="container">
		<view class="head">
			<view class="left"><span>收货地址</span></view>
			<view class="right">
				<span>请选择收货地址</span>
			</view>
		</view>
		<view class="address_box">
			<view class="address" v-if="currentAddress.order || currentAddress.mobile" @click="selectAddress">
				<view class="left">
					<view class="tit">
						{{ currentAddress.name }}
						<span>{{ currentAddress.mobile }}</span>
						<view class="defaultIcon" v-if="currentAddress.default">默认</view>
					</view>
					<view class="txt">{{ currentAddress.province }}{{ currentAddress.city }}{{ currentAddress.district }}{{ currentAddress.address }}</view>
				</view>
				<view class="right">
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
			<view v-else class="none_address" @click="selectAddress">
				<aicon type="location" size="25"></aicon>
				<span>选择地址</span>
			</view>
		</view>
		<!-- 选择地址 -->
		<u-popup :show="select_show" closeable bgColor="#f8f8f8" :round="10" mode="bottom" @close="select_show = false">
			<SelectPopup v-if="select_show"></SelectPopup>
		</u-popup>
	</view>
</template>

<script>
	import SelectPopup from './select-popup.vue'
	import { mapState, mapMutations, mapGetters, mapActions } from 'vuex'

	export default {
		name:"address-select",
		components: {
			SelectPopup
		},
		data() {
			return {
				addressData: '',
				select_show: false,
			};
		},
		watch: {
			addressList () {
				this.init();
			}
		},
		computed: {
			...mapState('app_store', ['currentAddress']),
		},
		mounted () {
			this.init();
			this.$bus.$on('selectClose', () => {
				this.select_show = false;
			})
		},
		methods: {
			...mapMutations('app_store', ['SET_CURRENT_ADDRESS']),
			init () {
				if (this.addressList.length) {
					this.SET_CURRENT_ADDRESS(this.addressList[0]);
				}
				this.$emit('address', this.currentAddress);
			},
			// 选择地址弹窗开启
			selectAddress () {
				this.select_show = true;
			},
			// 选择地址弹窗关闭
			selectClose () {
				this.select_show = false;
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		
		.head {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 100rpx;
			width: 90%;
			margin: 0 auto;
		
			.left {
				color: #1c1c1c;
				font-size: 30rpx;
				font-weight: bold;
				line-height: 30rpx;
				display: flex;
				align-items: center;
			}
		
			.right {
				color: #999;
				display: flex;
				align-items: center;
				font-size: 26rpx;
				line-height: 26rpx;
			}
		}
		.address_box {
			width: 90%;
			margin: 0 auto;
			padding-bottom: 30rpx;
		
			.address {
				display: flex;
				align-items: center;
				justify-content: space-between;
		
				.left {
					flex: 1;
					min-width: 0;
		
					.tit {
						display: flex;
						color: #1c1c1c;
						font-size: 32rpx;
						
						.defaultIcon{
							height: 30rpx;
							padding: 0 4rpx;
							border-radius: 4rpx;
							border: 1rpx solid #F9AE3D;
							color: #F9AE3D;
							font-size: 24rpx;
							transform: rotate(360deg);
							margin-left: 6rpx;
							display: flex;
							align-items: center;
						}
		
						span {
							color: #666;
							padding-left: 20rpx;
							font-size: 28rpx;
						}
					}
		
					.txt {
						font-size: 28rpx;
						color: #666;
						padding-top: 10rpx;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
				}
		
				.right {
					width: 80rpx;
					display: flex;
					align-items: center;
					justify-content: flex-end;
				}
			}
		
			.none_address {
				width: 100%;
				height: 150rpx;
				border: 1px dashed #e5e5e5;
				border-radius: 10rpx;
				color: #bbb;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
		
				span {
					font-size: 26rpx;
				}
			}
		}
	}
</style>